/**
 * @description 申请售后
 */
import style from './styles/AfterSale.less';
import classnames from "classnames";
import React from 'react';
import EntryBase from "../Common/EntryBase";
const Fragment = React.Fragment;
import { Button, Picker, Icon, InputItem, Toast } from 'wd-mobile';
import UploadImage from "components/UploadImage";

import { appeal, detail } from "api_zhoujianyi/front/app/order";

import config from 'commons/config';
import util from "commons/util";
let query = util.parseQueryString();

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            reason: "",
            detail: {},
            appealReason: "",
            appealReasonText: "",
            imgList: []
        }
        this.reasonData = [
            { label: "券码已被使用", value: "券码已被使用" },
            { label: "券码无效/乱码", value: "券码无效/乱码" },
            { label: "实际商品与券码不符", value: "实际商品与券码不符" },
            { label: "其他", value: "其他" }
        ]
    }
    componentDidMount() {
        // 查询订单详情
        detail({
            orderNo: this.props.match.params.orderNo
        }).then(res => {
            this.setState({
                detail: res.data
            })
        })
    }
    render() {
        return (
            <Fragment>
                <div className={classnames(style.main, "x-scroll-y")}>
                    <div className={classnames(style.orderInfoGoods, "x-part")}>
                        <div className={style.orderInfoGoodsImg}>
                            <div className={style.orderInfoGoodsImgContainer} style={this.state.detail.goodsIcon ? { backgroundImage: `url(${this.state.detail.goodsIcon})` } : null}></div>
                        </div>
                        <div className={style.orderInfoGoodsText}>
                            <div className={style.orderInfoGoodsTitle}><span>{this.state.detail.goodsName}</span></div>
                            <div className={style.orderNo}>订单号：{this.state.detail.orderNo}</div>
                            <div className={style.totalPrice}>
                                <span className={style.totalPriceTitle}>合计：</span>
                                <span className={style.totalPriceValue}>￥{this.state.detail.realPayAmount}</span>
                            </div>
                            <div className={style.orderTime}>
                                <span>下单时间：{this.state.detail.createTime}</span>
                            </div>
                        </div>
                    </div>
                    <div className={classnames(style.reason, "x-part")}>
                        <div className={style.reasonName}><span>申请售后原因</span></div>
                        <div className={style.reasonValue} onClick={() => {
                            Picker.show({
                                data: this.reasonData,
                                value: this.state.appealReason,
                                onOk: (res) => {
                                    console.log(res)
                                    this.setState({
                                        appealReason: res.value
                                    })
                                }
                            })
                        }}>
                            <span className={classnames({
                                [style["input-placeholder"]]: !this.state.appealReason
                            })}>{this.state.appealReason || "请选择原因"}</span>
                            <Icon rotate={180} className="x-icon-arrow-left" />
                        </div>
                    </div>
                    <div className={classnames(style.contentAndImgs, "x-part")}>
                        <InputItem type="textarea" autoSize maxLength={200} placeholder="请输入您想要反馈的问题，我们将及时跟进。（200字以内）" onChange={(e, s) => {
                            this.setState({
                                appealReasonText: e.target.value
                            });
                        }} />
                        <UploadImage max={2} uploadUrl={`${config.public.rpcPath.xukaiyu}app/file_upload/upload_pic`} onChange={(imgList) => {
                            this.setState({
                                imgList: imgList
                            })
                        }} />
                    </div>
                    <div className={classnames(style.btn, "x-part")}>
                        <Button className={style.button} onClick={() => {
                            if (!this.state.appealReason) {
                                Toast.info("必须选择申请原因", 1500);
                                return;
                            }
                            if (!this.state.appealReasonText) {
                                Toast.info("必须填写申请理由", 1500);
                                return;
                            }
                            if(!this.state.imgList.length){
                                Toast.info("请至少上传一张图片", 1500);
                                return;
                            }
                            this.appeal();
                        }}>提交售后</Button>
                    </div>
                </div>
            </Fragment>
        )
    }

    // // 表单输入
    // inputChange(name, value) {
    //     const formData = { ...this.state.formData };
    //     formData[name] = value;
    //     this.setState({
    //         appealReason: appealReason
    //     })
    // }

    // 提交售后
    appeal() {
        appeal({
            // goodsNo: this.state.detail.goodsNo,
            // orderAmount: this.state.detail.orderAmount,
            orderNo: this.state.detail.orderNo,
            // tradeNo: this.state.detail.tradeNo,
            // realPayAmount: this.state.detail.realPayAmount,
            appealReason: this.state.appealReason + " - " + this.state.appealReasonText,
            // goodsType: this.state.detail.goodsType
            appealImage1: this.state.imgList[0] || "",
            appealImage2: this.state.imgList[1] || "",
        }).then(res => {
            // 申诉成功后，直接跳转到纠纷中订单列表
            location.href = "./order.html#/List/appeal";
        })
    }
}

export default App;